/*
  学习目标：React中JSX-小结
  JSX插值表达式
  1.基本类型：
    1.1: string number 正常显示
    1.2：null undefined boolean 💥 不会显示在DOM上
  2.应用类型
    2.1 数组：🔔数组内的每项元素，会当做一个个的DOM渲染出来
    2.2 对象: 💥JSX中不可以使用对象直接插值
    2.3 函数: 函数要调用，返回值要符合上述要求
  3.其它类型
    3.1 三元
    3.2 逻辑运算
    3.3 JSX本身：🔔往往配合其它方式使用
  

    JSX使用的注意事项：
    1. 必须有根标签： 👍<></>   <React.Fragment></React.Fragment>
    2. 必须有关闭标签： <input />
    3. 💥关键字冲突：
      3.1 class => className
      3.2 for => htmlFor
*/

import React from 'react';
import ReactDOM from 'react-dom';

const divNode = (
  <>
    <ul>
      <li>12</li>
      <li>34</li>
      <li>45</li>
    </ul>
    <ul>
      <li>12</li>
      <li>34</li>
      <li>45</li>
    </ul>
    <input type="text" id="box" />

    <label htmlFor="box">点我激活input</label>
  </>
);

ReactDOM.render(divNode, document.getElementById('root'));
